/**
 * Created by eaTong on 2018/12/5 .
 * Description:
 */
import React from 'react';
import {Container, Header, Content, Form, Item, Picker, List, ListItem, Text, View, Button, Fab,Icon} from 'native-base';
import ajax from "../utils/ajax";

let currentDepartmentId = '';
export default class EmployeeManage extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: '员工维护',
      headerRight: (
        <Button transparent onPress={() => navigation.navigate('AddEmployee', {currentDepartmentId})}>
          <Text style={{color: '#3142FF'}}>添加</Text>
        </Button>
      ),
      headerLeft: null
    }
  };
  state = {
    departmentList: [],
    selectedDepartment: '',
    employees: [],
    showFabs:false
  };

  async componentDidMount() {
    const departmentList = await ajax({url: '/api/business/dep/get'});
    this.setState({
      departmentList
    });
    // await this.getDepartmentEmployees();
  }

  async getDepartmentEmployees() {
    const result = await ajax({
      url: '/api/employee/getListByDepartmentId',
      data: {department_id: this.state.selectedDepartment}
    });
    this.setState({
      employees: result.employees
    })
  }

  async onSelectDepartment(selectedDepartment) {
    currentDepartmentId = selectedDepartment;
    this.setState({selectedDepartment}, () => this.getDepartmentEmployees());
  }

  render() {
    const {departmentList, selectedDepartment, employees} = this.state;
    return (
      <Container>
        <Content>
          <Form>
            <Item picker>
              <Picker
                mode="dialog"
                placeholder="选择部门"
                placeholderStyle={{color: "#bfc6ea"}}
                placeholderIconColor="#007aff"
                selectedValue={selectedDepartment}
                onValueChange={this.onSelectDepartment.bind(this)}
              >
                {departmentList.map(department => (
                  <Picker.Item
                    label={department.department_name}
                    value={department.department_id + ''}
                    key={department.department_id + ''}
                  />
                ))}
              </Picker>
            </Item>
          </Form>
          <List>
            {employees.map(employee => (
              <ListItem key={employee.employee_id} style={{display:'flex'}}>
                <View style={{flex:1}}>
                  <Text>{employee.employee_name}</Text>
                  <Text style={{color: '#8c8c8c', fontSize: 12}}>{employee.telephone}</Text>
                </View>
                <View>
                  <Button transparent onPress={() => this.props.navigation.navigate('GrantView', {employee})}>
                    <Text style={{color: '#3142FF'}}>视野分配</Text>
                  </Button>
                </View>
              </ListItem>
            ))}

          </List>
        </Content>
      </Container>
    );
  }
}
